<template>
  <div v-loading="loading"  element-loading-text="加载中。。。">
    <el-card style="overflow:visible;">
      <el-form :model="form"  size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
             <el-col :md="12" :lg="6">
                 <el-form-item label="键值意义"  prop="KeyVal" >
                  <el-select v-model="form.KeyVal"  filterable>
                    <el-option
                    v-for="item in brnoList"
                    :key="item.value"
                    :label="item.DataKeyVal+'-'+item.Meaning"
                    :value="item.DataKeyVal"
                    :disabled="item.disabled">
                    </el-option></el-select>
                </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="6">
                  <el-form-item prop="Wher" label="是否可维护">
                    <!-- 下拉 -->
                    <el-select v-model="form.Wher"   filterable  placeholder="请选择"  >
                    <el-option
                    v-for="item in BusinessList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                  </el-select>
                  <!--   <el-input v-model="form.RoleStatus" placeholder=""></el-input> -->
                  </el-form-item>
                </el-col>
                  <el-col :lg='2' :md='3' class="searchBtnMarginTop" >
                    <el-button type="primary" icon='el-icon-search'
                      :loading="loading" size='mini' @click="businesstypeList" >查询</el-button>
                </el-col>
                <el-col :lg="2" :md="3" class="searchBtnMarginTop">
                  <el-button
                    type="warning"
                    size="mini"
                    icon="el-icon-refresh"
                    @click="resetForm('form')"
                  >重置</el-button>
                </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top:10px;">
      <el-row :gutter="10">
        <el-col  :lg="2" :md="3" v-if="btnPermission('Button_User_Add')">
          <el-button type="primary" size="mini"  @click="createRole" icon='el-icon-plus'
          >新增</el-button>
        </el-col>
        <el-col  :lg="2" :md="3"  v-if="btnPermission('Button_User_Edit')">
          <el-button type="primary"
            size="mini" icon='el-icon-edit' @click="updateRole" :disabled="currentRow.length!=1"
            >修改</el-button><!--  -->
        </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Delete')">
          <el-button type="danger"
            size="mini" icon='el-icon-delete' @click="delUser"  :disabled="currentRow.length!=1"
          >删除</el-button>
        </el-col>
        <el-col :lg="2" :md="3" v-if="btnPermission('Button_User_Delete')">
          <el-button type="primary"
            size="mini" icon='el-icon-search' @click="Seetable"  :disabled="currentRow.length!=1"
          >查看子表</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" ref="table" border class="tableMarginTop"
        highlight-current-row
        @selection-change="handleCurrentChange"
        header-row-class-name="tableHeaderClass"
        style="min-height:390px;">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop=	"DictID"  label="DictID"></el-table-column>
        <el-table-column prop="DataKey" label="键"></el-table-column>
        <el-table-column prop="DataKeyVal"  label="键值"></el-table-column>
        <el-table-column prop="Meaning"   label="意义"></el-table-column>
        <el-table-column prop="PreserveFlag" :formatter="dataFormat"   label="是否可维护"></el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:20px;" v-show="tableData">
        <el-pagination  :current-page="currentPage" background
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalRcrdNum"
          @current-change="changePage">
        </el-pagination>
      </div>
    </el-card>
   <!-- 弹窗 -->
    <keep-alive>
      <component :is="dialogList.addbusinessTypeDialog" :option="dialogOptions" @refreshTable="businesstypeList"></component>
    </keep-alive>
      <keep-alive>
      <component :is="dialogList.update" :optionUpdate="dialogOptionsupdate"  @refreshTable="businesstypeList"></component>
    </keep-alive>
     <keep-alive>
      <component :is="dialogList.channel" :option="dialogOptionschannel"   @refreshTable="businesstypeList"></component>
    </keep-alive>
  </div>
</template>

<script>
import addbusinessTypeDialog from "./dialog/addbusinessType";
import channel from "./dialog/channel";
import update from "./dialog/updatebusinessType";
import request from "@/common/utils/request";
import getGlobalParams from "@/common/utils/getGlobalParams";
import keyCode from "@/message/basicmanagement/datadictionary/data-dictionary-KeyCode";
import QryDataDict from "@/message/basicmanagement/datadictionary/data-dictionary-QryDataDict";
import del from "@/message/basicmanagement/datadictionary/data-dictionary-del";

export default {
  name: "",
  components: {},
  data() {
    return {
      PreserveFlag: [],
      BsIDTp1: [],
      BsAttr1: [],
      brnoMap: {},
      brnoList: [],
      pageSize: undefined, //表格每页的条数
      brnoName: {},
      BusinessList: [
        { name: "Y-是", value: "Y" },
        { name: "N-否", value: "N" }
      ],
      form: {
        //表单数据
        Wher: "",
        KeyVal: "",
        roleID: "",
        roleName: ""
      },
      dialogList: {
        //指定被渲染组件列表
        addbusinessTypeDialog,
        update,
        channel
      },
      currentRow: [], //表格当前选中行
      currentPage: 1, //表格当前页
      totalRcrdNum: 0,
      tableData: [], //表格 数据
      loading: false, //loading遮罩
      total: 0, //表格总条数
      startDialogVisible: false,
      checkedUser: false, //控制按钮是否可用
      isDisabledDel: false,
      dialogOptions: {
        //新增
        isShow: false
      },
      dialogOptionsupdate: {
        //修改
        isShow: false,
        currentRow: []
      },
      dialogOptionschannel: {
        //渠道业务分配弹窗
        isShow: false,
        currentRow: []
      },
      dialogOptionsupdateUser: { isShow: false, currentRow: [] }
    };
  },
  computed: {},
  created: function() {
    this.PreserveFlag = getGlobalParams.get("PreserveFlag");
    this.pageSize = getGlobalParams.get("PageSize");
    this.initList();
    this.businesstypeList();
  },
  methods: {
    dataFormat(row, column) {
      //格式化表格
      if (column.property == "PreserveFlag")
        return this.PreserveFlag[row[column.property]];
    },
    initList() {
      //键值加载
      let resBody = new keyCode();
      request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            this.brnoList = response.RspInfo.Result || [];
          } else {
            this.$message({
              type: "warning",
              message: SYS_HEAD.ReturnMessage
            });
          }
        })
        .catch(error => {
          console.error("查询错误", error);
        });
    },
    businesstypeList() {
      let resBody = new QryDataDict();
      resBody.data.PreserveFlag = this.form.Wher;
      resBody.data.DataKeyVal = this.form.KeyVal;
      resBody.data.CurtPage = this.currentPage;
      resBody.data.PageSize = this.pageSize;
      resBody.data.StartRows = (this.currentPage - 1) * this.pageSize;
      request(resBody).then(response => {
        if (response.APP_HEAD.ReturnCode === "000000") {
          this.tableData = response.RspInfo.Result;
          console.log(response);
          this.totalRcrdNum = response.RspInfo.TotalRcrdNum;
        } else {
          this.totalRcrdNum = Number(response.RspInfo.TotalRcrdNum);
          this.tableData = [];
          this.$message({
            type: "error",
            message: response.SYS_HEAD.ReturnMessage
          });
        }
      });
    },
    changePage(val) {
      this.currentPage = val;
      this.businesstypeList();
    },
    refreshTable() {
      //刷新数据并清除选中的数据
      this.businesstypeList();
    },
    updateRole() {
      this.dialogOptionsupdate.isShow = true;
      this.dialogOptionsupdate.currentRow = this.currentRow;
      this.dialogOptionsupdate.isDisabled = true;
    },
    Seetable() {
      this.dialogOptionschannel.isShow = true;
      this.dialogOptionschannel.currentRow = this.currentRow;
      this.dialogOptionschannel.brnoList = this.brnoList;
      this.dialogOptionschannel.isDisabled = true;
    },
    delUser() {
      //删除弹出
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.Del();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    createRole() {
      //添加
      this.dialogOptions.isShow = true;
    },
    Del() {
      //删除
      this.loading = true;
      let resBody = new del();
      resBody.data.DictID = this.currentRow[0].DictID;
      resBody.data.DataKey = this.currentRow[0].DataKey;
      resBody.data.DataKeyVal = this.currentRow[0].DataKeyVal;
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.businesstypeList();
          } else {
            this.loading = false;
            this.$message({
              type: "success",
              message: "删除失败!"
            });
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    resetForm(form) {
      //重置查询表单
      this.$refs["" + form].resetFields();
    },
    handleCurrentChange(val) {
      //表格选中行改变事件设置当前行的值（currentRow）已经改变控制按钮是否可用
      this.currentRow = val;
    }
  }
};
</script>


<style lang="scss" scoped>
.selectTree {
  min-width: 150px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-card {
  width: 100%;
}
.el-form-item {
  margin-left: 30px;
}
.el-form-item1 {
  margin-left: 10px;
}
.box2-button {
  width: 80px;
}

.el-card {
  overflow: inherit;
}
</style>
